<!--
 * @Author: Luxiaoxiang
 * @Date: 2022-10-11 22:42:44
 * @LastEditors: lxx
 * @LastEditTime: 2022-10-24 16:45:21
 * @Description: 
 * @FilePath: \briup-ui\src\pages\admin\check\AccountApply.vue
-->
<template>
  <!-- 账户变更审核 -->
  <div>
    <!-- 第一行 表单控件 -->
    <div class="header" style="display: flex">
      <el-date-picker
      v-model="startEnd"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        value-format="timestamp"
        @change="selectDate"
        
      >
      </el-date-picker>
      <el-form
        :inline="true"
        :model="params"
        class="demo-form-inline"
        style="margin-left: 10px"
      >
        <el-form-item>
          <el-select v-model="params.applyType" placeholder="请选择类型" clearable>
            <el-option label="充值" value="充值"></el-option>
            <el-option label="提现" value="提现"></el-option>
          </el-select>
          <el-select v-model="params.status" placeholder="请选择状态" clearable>
            <el-option label="通过" value="通过"></el-option>
            <el-option label="不通过" value="不通过"></el-option>
            <el-option label="未审核" value="未审核"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="params.userId" placeholder="申请人编号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 第一行 表单控件结束 -->

    <!-- 第二行 表格 -->
    <el-table :data="accountData" style="width: 100%">
      <el-table-column type="index" label="序号" > </el-table-column>
      <el-table-column prop="userId" label="申请编号" > </el-table-column>
      <el-table-column prop="applyTime" label="申请时间"> 
        <template slot-scope="scope">
          <span>
            {{scope.row.applyTime |fmtDate}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="applyType" label="变更类型"> 
        <template slot-scope="scope" >
        <el-tag  effect="plain"  v-if="scope.row.applyType === '提现'">提现</el-tag>
          <el-tag  effect="plain"  v-else type="danger">充值</el-tag>
          
       </template>
      </el-table-column>
      <el-table-column prop="money" label="变更资金"> 
        <template slot-scope="scope">
          <span scope.row.money  >
            ￥<span style="color:red;font-size:16px">{{scope.row.money}}</span>元
            
            
           
          </span>
         
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="变更原因"> </el-table-column>
      <el-table-column prop="status" label="状态"> 
        <template slot-scope="scope" >
        
           <span class="onLine" v-if="scope.row.status === '通过'">通过</span>
           <span class="offLine" v-else>不通过</span>
          
       </template>
      </el-table-column>
      <el-table-column label="审核">
        <template slot-scope="scope">
          <a
            v-if="scope.row.status == '通过'"
            href="#"
            @click.prevent="changeStatus(scope.row.id, '不通过')"
          >
            <el-tag type="danger">不通过</el-tag>

          </a>
          <a
            v-else
            href="#"

            @click.prevent="changeStatus(scope.row.id, '通过')"
          >
            <el-tag >通过</el-tag>
          </a>
        </template>
      </el-table-column>
    </el-table>
    <!-- 第二行 表格结束 -->

<!-- 第三行 分页按钮 -->
<div class="bottom">
      <el-pagination
      class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="params.page"
      :page-sizes="[2, 5, 8, 20, 30]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
  </el-pagination>

  </div>

  </div>
</template>

<script>
import { fmtDate } from "@/filters";
import { getAccoutApply,Pass,unPass } from "../../../api/accountApply";
import { log } from '@antv/g2plot/lib/utils';
export default {
  data() {
    return {
      params: {
        page: 1,
        pageSize: 10,
      },
      accountData:[],
      time:[],
      total:0,
      startEnd: [],
      beginTime: '',
      endTime: ''


    };
  },
  computed: {},
  methods: {
    toSearch(){
      this.params.page = 1;
      this.getAccoutApplys();
           
    },
    async getAccoutApplys() {
      this.loading = true;
      for (const key in this.params) {
        if (!this.params[key]) {
          delete this.params[key]
        }
      }
      if (this.beginTime && this.endTime) {
        this.params.beginTime = this.beginTime
        this.params.endTime = this.endTime
      }
      let res = await getAccoutApply(this.params);
      console.log(res);
      this.accountData=res.data.list;
      this.total = res.data.total;
      // console.log(this.total,'444');
    },
    // 页码条数发生改变的方法 默认参数pageSize
    handleSizeChange(pageSize) {
      // 当前页码发生改变的方法
      this.params.pageSize = pageSize;
      this.params.page = 1;
      this.getAccoutApplys();
    },
    // 当前页码发生改变的方法 默认参数页码page
    handleCurrentChange(page) {
      this.params.page = page;
      this.getAccoutApplys();
    },
     
    changeStatus(id, status) {
      this.$confirm('此操作将改变账户的状态，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        if (status === '通过') {
          const res = await Pass({ id })
          this.$message({
            type: 'success',
            message: res.message
          })
        } else {
          const res = await unPass({ id })
          this.$message({
            type: 'success',
            message: res.message
          })
        }
        // 刷新页面
        this.getAccoutApplys()
      })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消我们的操作'
          })
        })
    },
     // 时间处理
     selectDate() {
      if (this.startEnd === null) {
        this.startEnd = []
        this.beginTime = undefined
        this.endTime = undefined
      } else {
        this.beginTime = this.startEnd[0]
        this.endTime = this.startEnd[1]
      }
    }
    
 
   
   
  },
  created() {
    this.getAccoutApplys();
  },
  mounted() {},
};
</script>


<style lang="scss">
.bottom{
text-align: center;
margin-top: 30px;
}
$color: #30b08f;
.bottom{
text-align: center;
margin-top: 30px;
}

.onLine {
  color: $color;
}
.offLine {
  color: #e65d6e;
} 
</style>
